<script setup>
import Index from "@/views/index/Index.vue";
import Login from "@/views/login/Login.vue";

import {useRoute} from "vue-router";
const route = useRoute();

import {ref,watch,nextTick} from "vue";

// 页面元素
const login = ref(null);
const index = ref(null);

/**
 * 更新页面样式
 * 用于解决页面刷新时，v-if和v-else同时闪现的问题
 * 监听路由变化，更新页面样式
 */
function updateStyle(){
  console.log(route.path);
  nextTick(()=>{
    if(route.path === '/login' && login.value !== null){
      login.value.style.display = 'block';
    }
    else{
      // 主页
      index.value.style.display = 'block';
    }
  });
}

// 监听路由变化,变更页面样式
watch(route,()=>{
  updateStyle();
});

</script>

<template>
  <div id="app">
    <!-- 登录页 -->
    <div v-if="route.path === '/login'" ref="login" id="login">
      <Login/>
    </div>

    <!-- 主要页面内容 -->
    <div v-else ref="index" id="index">
      <Index/>
    </div>
  </div>


</template>

<style scoped lang="scss">
#login{
  display: none;
}

#index{
  display: none;
}

</style>
